<template>
	<view class="myOrder">
		<view class="statusBar">
			<view :class="{statusItem:1,checked:orderStatus==1}" @click="statusChange(1)">未发货</view>
			<view :class="{statusItem:1,checked:orderStatus==2}" @click="statusChange(2)">已发货</view>
		</view>
		<view class="orderItem">
			<div class="row">
				<image src="../../../static/logo.png" class="goodsImg"></image>
				<view class="goodsInfo">
					<view>订单号&emsp;：167722031212313</view>
					<view>商品名称：<text class="blue">穿绳加厚垃圾袋75只</text></view>
					<view>商品单价：<text class="red">6.9</text>元</view>
					<view>商品数量：1</view>
				</view>
			</div>
			<div class="row">
				<view>
					<view>收货人&emsp;：<text class="blue">张三</text></view>
					<view>手机号码：<text class="blue">19856123596</text></view>
					<view>收获地址：<text class="blue">成都市双流区马家沟北路98号清新苑</text></view>
				</view>
			</div>
			<view>支付时间：2023-02-24 16：25：36</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderStatus: 1
			}
		},
		methods: {
			statusChange(param) {
				this.orderStatus = param
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../static/style/mixin.scss';

	.myOrder {
		@include bg2;

		.statusBar {
			display: flex;
			margin-bottom: 20upx;
			background-color: #fff;

			.statusItem {
				width: 375upx;
				height: 100upx;
				@include cc;
			}

			.checked {
				background-color: aqua;
				color: #0000ff;
			}
		}

		.orderItem {
			@include w_box;
			font-size: 26upx;

			.red {
				color: red;
			}

			.blue {
				color: blue;
			}

			.row {
				@include ends;
				line-height: 40upx;
				padding-bottom: 30upx;
				border-bottom: 1upx solid #00000050;
				margin-bottom: 20upx;

				.goodsImg {
					width: 300upx;
					height: 240upx;
				}

				.goodsInfo {
					width: 360upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 200upx;
				}
			}
		}
	}
</style>
